<template>
  <div class="container">
    <div class="title">动画效果展示合集</div>
    <div>
        <h3>1、涌动的弹簧效果</h3>
    </div>
    <div class="dajianshi">
            <span style="--tt:1;"></span>
            <span style="--tt:2;"></span>
            <span style="--tt:3;"></span>
            <span style="--tt:4;"></span>
            <span style="--tt:5;"></span>
            <span style="--tt:6;"></span>
            <span style="--tt:7;"></span>
            <span style="--tt:8;"></span>
            <span style="--tt:9;"></span>
    </div>

    <div class="animate2">
        <h3>2、篮球弹跳，含挤压弹起模态</h3>
    </div>
    <div class="dajianshi1">
        <div id="suport">
            <div id="smash">
                <div id="translateShadow">
                    <div id="light"></div>
                    <div id="rotateImg"></div>
                </div>
            </div>
        </div>
    </div>


    <div class="">
        <div class="animate2">
            <h3>3、鼠标移上去旋转、放大、移动</h3>
        </div>
        <div style="width:640px ; margin:0 auto;">
			<div class="itemBox img1">360°旋转 </div>
			<div class="itemBox img2">放大</div>
			<div class="itemBox img3">旋转放大</div>
			<div class="itemBox img4">上下左右移动 </div>
		</div>
    </div>

    <div class="">
        <div class="animate2">
            <h3>4、花样的鼠标悬停特效</h3>
        </div>
        <div style="width:640px ; margin:0 auto; background:#222222;">
			<button class="fill">Fill In</button>
			<button class="pulse">Pulse</button>
			<button class="close">Close</button>
			<button class="raise">Raise</button>
			<button class="up">Fill Up</button>
			<button class="slide">Slide</button>
			<button class="offset">Offset</button>
		</div>
    </div>


    <div class="">
        <div class="animate2">
            <h3>5、图片,显示文字或附加层</h3>
        </div>
        <div class="one">
            <img :src="imgData">
            <div class="word">阿米尔·汗（Aamir Khan），1965年3月14日出生于印度孟买，印度宝莱坞演员、导演、制片人。</div>
        </div>
    </div>


    <div class="">
        <div class="animate2">
            <h3>6、太阳、地球、月球的旋转</h3>
        </div>
        <div class="box">
			<div class="sunline">
				<div class="sun"></div>
				<div class="earthline">
					<div class="earth"></div>
					<div class="moon"></div>
				</div>
			</div>
		</div>
    </div>


    <div class="" style="width:100%">
        <div class="animate2">
            <h3>7、绘制不断跳动的心形</h3>
        </div>
        <div class="">
			<div class="heart"></div>
            <div class="heart"></div>
            <div class="heart"></div>
            <div class="heart"></div>
            <div class="heart"></div>
		</div>
    </div>
    <div style="clear:both"></div>
    

    <div class="" style="width:100%">
        <div class="animate2">
            <h3>8、鼠标悬浮文字跳动</h3>
        </div>
        <div class="">
			<div class="dajianshi8">鼠标悬浮文字跳动</div>
		</div>
    </div>


    <div class="" style="width:100%">
        <div class="animate2">
            <h3>9、音频波纹加载效果</h3>
        </div>
        <div class="dajianshi9">
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
		</div>
    </div>


    <div class="" style="width:100%">
        <div class="animate2">
            <h3>10、文字颜色渐变的流光效果</h3>
        </div>
        <div class="dajianshi10">
           文字颜色渐变的流光效果
		</div>
    </div>



  </div>
</template>

<script>
import { setCrumbsAndMenu } from '@/common/common';
export default {
  name: 'HelloWorld',
  props: {
  },
  setup() {
    setCrumbsAndMenu(3, "动画效果");
  },
  data() {
    return {
        imgData: require('@/assets/homework.png'),
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 div {
    margin:0;
    padding:0;
 }
 .container {
    width: 100%;
    overflow-y: auto;
 }
 .title {
    font-size: 24px;
 }
 .dajianshi {
    position: relative;
    margin:200px auto 0;
    width: 50px;
    height: 50px;
    transform-style: preserve-3d;
    transform: perspective(500px) rotateX(50deg) translateZ(50px);
}

.dajianshi span {
    position: absolute;
    top: calc(-18px * var(--tt));
    left: calc(-18px * var(--tt));
    bottom: calc(-18px * var(--tt));
    right: calc(-18px * var(--tt));
    border: 8px solid rgba(0, 0, 0, 0.8);
    border-radius: 50%;
    animation: move 1.5s ease-in-out infinite alternate;
    animation-delay: calc(var(--tt) * 0.1s);
}

@keyframes move {

    0%,
    100% {
        transform: translateZ(0px);
    }

    50% {
        transform: translateZ(-100px);
    }
}

/* 篮球弹跳，含挤压弹起模态 */
.animate2 {
    margin-top: 200px;
}

.dajianshi1 {
    width: 100%;
    height: 500px;
    text-align: center;
    position: relative;
}


#suport {
    position: absolute;
    bottom: 80px;
    width: 100%;
    text-align: center;
}

#smash {
    animation-name: smash;
    animation-duration: 1s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    transform-origin: bottom;
}

#translateShadow,
#rotateImg,
#light {
    border-radius: 50%;
    display: inline-block;
    width: 200px;
    height: 200px;
}

#light {
    background-image: radial-gradient(circle at 20% 20%, rgba(255, 221, 179, .7), rgba(255, 221, 179, .5) 10%, transparent 30%, rgba(83, 42, 0, .8) 85%);
    position: absolute;
    z-index: 1;
}

#translateShadow {
    animation-name: translateShadow;
    animation-duration: 1s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
}

#rotateImg {
    background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='75 75 251 251' fill='rgb(83,42,0)'><path d='M313.3,145.3c-14.4-29.3-38.8-50.5-67.1-61.6c-4.6-1.7-16.2-5.1-21.3-6.3	c-26.3-5.3-54.5-2.3-80.4,10.4c-30.2,14.8-52.9,40.6-63.8,72.5c-10.9,31.8-8.7,66,6.2,96.1l0.1,0.2c2.1,4.2,4.4,8.3,6.9,12.2l0,0	c0,0,0,0,0,0c23.6,36.9,64.4,58,106.5,58c18.7,0,37.6-4.1,55.4-12.9c30.2-14.8,52.9-40.6,63.8-72.5 	C330.3,209.6,328.1,175.5,313.3,145.3z M238.3,86.2c25.2,12.5,41.2,36.6,46,68.5c-24.3,0.8-45.4-15.7-67.4-33.1 	c-18.4-14.5-37.3-29.3-58.9-34.2C184.6,77.6,212.8,77.7,238.3,86.2z M85.4,161.9c10.4-30.6,32.2-55.3,61.2-69.6 	c0.9-0.4,1.7-0.8,2.6-1.2c23.6,2.3,44.4,18.6,64.6,34.5c21.4,16.9,43.4,34.1,68.8,34.1c0.8,0,1.5,0,2.3-0.1c1,9.5,1.1,19.7,0.2,30.4 	c-9.8-3.3-19.3-5.9-25.7-7.6c-37.6-9.8-79.7-16.1-112.5-16.7c-24-0.5-53,1.8-66,14.2C81.8,173.9,83.4,167.8,85.4,161.9z M91.4,254.4 	l-0.1-0.2c-10.1-20.5-14.1-42.8-11.9-65l0.5,0.2c5.3-12.9,29-19.5,66.7-18.8c32.5,0.7,74.1,6.8,111.4,16.6 	c10.1,2.6,18.9,5.3,26.5,7.8c-1.2,10.2-3.3,20.4-6.3,30.3c-19.8-8.8-48.7,2.6-81.8,15.7c-32,12.6-68.1,26.8-99.7,23 	C94.9,261,93.1,257.7,91.4,254.4z M187.8,321.2c-34.6-3.6-67-21.9-87.5-51.7c31.8,2.4,66.9-11.4,98-23.7 	c32.4-12.8,60.6-23.9,78.4-15.5c-5.6,17.2-13.6,33.4-23.5,47c-12.8,17.7-34.5,39.5-65.6,43.3L187.8,321.2z M253.5,309.4 	c-15.6,7.7-32.1,11.6-48.4,12.3c36.2-12.4,62.8-49,76.1-88.8c9.1,6.7,14.2,20.1,15.8,40.6C285.7,288.6,270.9,300.9,253.5,309.4z 	 M314.8,239.8c-3.3,9.8-7.8,19-13.3,27.4c-2.4-19.7-8.5-32.6-18.7-39.3c3.1-10.3,5.4-20.8,6.6-31.1c19.2,6.9,29.2,13.2,30.7,17.3 	l0.4-0.2C319.6,222.6,317.7,231.3,314.8,239.8z M290,191.7c1.1-11.3,1-22.1-0.2-32.4c6.8-0.9,13.8-3,21.1-6.8l-2.3-4.5 	c-6.8,3.4-13.2,5.4-19.5,6.3c-1.6-11.1-4.6-21.4-8.8-30.7c-4.6-10.3-10.8-19.2-18.3-26.6c19.5,11.6,36,28.7,46.8,50.5 	c9.3,18.9,13.4,39.4,12.3,59.8C314.9,201.6,302.6,196.1,290,191.7z'/></svg>");
    background-color: darkorange;
    background-size: 100%;
    animation-name: rotateImg;
    animation-duration:  5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes translateShadow {
    0% {
        transform: translateY(0);
        box-shadow: 40px 40px 10px #444466
    }

    100% {
        transform: translateY(-205px);
        box-shadow: 40px 350px 250px #444466
    }
}

@keyframes smash {
    0% {
        transform: scaleY(.7)
    }

    15% {
        transform: scaleY(1)
    }
}

@keyframes rotateImg {
    100% {
        transform: rotate(360deg)
    }
}


/* 鼠标移上去旋转、放大、移动 */
.itemBox {
    width: 120px;
    height: 120px;
    line-height: 120px;
    margin: 20px;
    background-color: #5cb85c;
    float: left;
    font-size: 12px;
    text-align: center;
    color: #fff;
    cursor: pointer;
}

/*效果一：360°旋转 修改rotate(旋转度数)*/
.img1 {
    transition: All 0.4s ease-in-out;
    -webkit-transition: All 0.4s ease-in-out;
    -moz-transition: All 0.4s ease-in-out;
    -o-transition: All 0.4s ease-in-out;
}

.img1:hover {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
}

/*效果二：放大 修改scale(放大的值)*/
.img2 {
    transition: All 0.4s ease-in-out;
    -webkit-transition: All 0.4s ease-in-out;
    -moz-transition: All 0.4s ease-in-out;
    -o-transition: All 0.4s ease-in-out;
}

.img2:hover {
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
}

/*效果三：旋转放大 修改rotate(旋转度数) scale(放大值)*/
.img3 {
    transition: All 0.4s ease-in-out;
    -webkit-transition: All 0.4s ease-in-out;
    -moz-transition: All 0.4s ease-in-out;
    -o-transition: All 0.4s ease-in-out;
}

.img3:hover {
    transform: rotate(360deg) scale(1.2);
    -webkit-transform: rotate(360deg) scale(1.2);
    -moz-transform: rotate(360deg) scale(1.2);
    -o-transform: rotate(360deg) scale(1.2);
    -ms-transform: rotate(360deg) scale(1.2);
}

/*效果四：上下左右移动 修改translate(x轴,y轴)*/
.img4 {
    transition: All 0.4s ease-in-out;
    -webkit-transition: All 0.4s ease-in-out;
    -moz-transition: All 0.4s ease-in-out;
    -o-transition: All 0.4s ease-in-out;
}

.img4:hover {
    transform: translate(0, -10px);
    -webkit-transform: translate(0, -10px);
    -moz-transform: translate(0, -10px);
    -o-transform: translate(0, -10px);
    -ms-transform: translate(0, -10px);
}




/* 花样的鼠标悬停特效 */
.fill:hover,
.fill:focus {
    box-shadow: inset 0 0 0 2em var(--hover);
}

.pulse:hover,
.pulse:focus {
    -webkit-animation: pulse 1s;
    animation: pulse 1s;
    box-shadow: 0 0 0 2em rgba(255, 255, 255, 0);
}

@-webkit-keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 var(--hover);
    }
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 var(--hover);
    }
}

.close:hover,
.close:focus {
    box-shadow: inset -3.5em 0 0 0 var(--hover), inset 3.5em 0 0 0 var(--hover);
}

.raise:hover,
.raise:focus {
    box-shadow: 0 0.5em 0.5em -0.4em var(--hover);
    -webkit-transform: translateY(-0.25em);
    transform: translateY(-0.25em);
}

.up:hover,
.up:focus {
    box-shadow: inset 0 -3.25em 0 0 var(--hover);
}

.slide:hover,
.slide:focus {
    box-shadow: inset 6.5em 0 0 0 var(--hover);
}

.offset {
    box-shadow: 0.3em 0.3em 0 0 var(--color), inset 0.3em 0.3em 0 0 var(--color);
}

.offset:hover,
.offset:focus {
    box-shadow: 0 0 0 0 var(--hover), inset 6em 3.5em 0 0 var(--hover);
}

.fill {
    --color: #a972cb;
    --hover: #cb72aa;
}

.pulse {
    --color: #ef6eae;
    --hover: #ef8f6e;
}

.close {
    --color: #ff7f82;
    --hover: #ffdc7f;
}

.raise {
    --color: #ffa260;
    --hover: #e5ff60;
}

.up {
    --color: #e4cb58;
    --hover: #94e458;
}

.slide {
    --color: #8fc866;
    --hover: #66c887;
}

.offset {
    --color: #19bc8b;
    --hover: #1973bc;
}

button {
    color: var(--color);
    -webkit-transition: 0.25s;
    transition: 0.25s;
}

button:hover,
button:focus {
    border-color: var(--hover);
    color: #fff;
}

button {
    background: none;
    border: 2px solid;
    font: inherit;
    line-height: 1;
    margin: 0.5em;
    padding: 1em 2em;
}


/* 图片,显示文字或附加层 */
.one {
    width: 500px;
    height: 300px;
    position: relative;
    z-index: 1;
    cursor: pointer;
    margin: 50px auto 0;
}

.one img {
    width: 500px;
    height: 300px;
}

.one .word {
    display: none;
    width: 500px;
    height: 300px;
    background-color: rgba(179, 8, 10, 0.8);
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    padding: 80px 50px;
    font-size: 20px;
    color: #fff;
    font-family: "microsoft yahei";
    line-height: 30px;
    text-align: center;
    box-sizing: border-box;
}

.one:hover .word {
    display: block;
}

.one .word::after {
    content: "";
    position: absolute;
    z-index: 3;
    width: 120px;
    height: 1px;
    background: #fff;
    bottom: 80px;
    left: 190px
}


/* 太阳、地球、月球的旋转 */
.box {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    position: relative;
    padding: 1px;
    height: 300px;
    width: 300px;
    margin-left: 200px;
}

.sunline {
    position: relative;
    height: 400px;
    width: 400px;
    border: 2px solid black;
    border-radius: 50%;
    margin: 50px 0 0 50px;
    -webkit-animation: rotate 10s infinite linear;
    animation: rotate 10s infinite linear;
}

.sun {
    height: 100px;
    width: 100px;
    margin: 50% 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: red;
    border-radius: 50%;
    -webkit-box-shadow: 5px 5px 10px red, -5px -5px 10px red, 5px -5px 10px red, -5px 5px 10px red;
    box-shadow: 5px 5px 10px red, -5px -5px 10px red, 5px -5px 10px red, -5px 5px 10px red;
}

.earthline {
    position: absolute;
    right: 0;
    top: 50%;
    height: 200px;
    width: 200px;
    margin: -100px -100px 0 0;
    border: 1px solid black;
    border-radius: 50%;
    -webkit-animation: rotate 2s infinite linear;
    animation: rotate 2s infinite linear;
}

.earth {
    margin: 50% 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    height: 50px;
    width: 50px;
    background-color: blue;
    border-radius: 50%;
}

.moon {
    position: absolute;
    left: 0;
    top: 50%;
    height: 20px;
    width: 20px;
    margin: -10px 0 0 -10px;
    background-color: black;
    border-radius: 50%;
}

@-webkit-keyframes rotate {
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}


.heart {
    position: relative;
    width: 100px;
    height: 90px;
    margin: 90px 50px;
        float: left;
}

.heart::before,
.heart::after {
    content: "";
    position: absolute;
    top: 40px;
    width: 52px;
    height: 80px;
    border-radius: 50px 50px 0 0;
    background: red;
}

.heart::before {
    left: 50px;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
}

.heart::after {
    left: 0;
    transform: rotate(45deg);
    transform-origin: 100% 100%;
}

/* 定义动画 */
@keyframes beat {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.5);
    }

    100% {
        transform: scale(1);
    }
}

/* 应用动画 */
.heart {
    animation: beat 1s infinite;
}


/* 鼠标悬浮文字跳动 */
.dajianshi8 {
    margin-top: 100px;
    font-size: 80px;
    text-align: center;
    color: orange;
}

.dajianshi8:hover {
    animation: animate 0.5s linear infinite;
}

@keyframes animate {

    0%,
    25% {
        text-shadow: 2px 5px 2px #f00;
    }

    50% {
        text-shadow: 2px -5px 2px #0f0;
    }

    75% {
        text-shadow: -2px 5px 2px #00f;
    }

    100% {
        text-shadow: -2px -5px 2px #f0f;
    }
}


.dajianshi9 {
    margin:100px auto 0;
    width: 200px;
    height: 120px;
    display: flex;
}

.dajianshi9 span {
    width: 10px;
    border-radius: 18px;
    margin-right: 20px;
}

.dajianshi9 span:nth-child(1) {
    animation: bar1 2s 0.2s infinite linear;
}

.dajianshi9 span:nth-child(2) {
    animation: bar2 2s 0.4s infinite linear;
}

.dajianshi9 span:nth-child(3) {
    animation: bar3 2s 0.6s infinite linear;
}

.dajianshi9 span:nth-child(4) {
    animation: bar4 2s 0.8s infinite linear;
}

.dajianshi9 span:nth-child(5) {
    animation: bar5 2s 1.0s infinite linear;
}

.dajianshi9 span:nth-child(6) {
    animation: bar6 2s 1.2s infinite linear;
}

.dajianshi9 span:nth-child(7) {
    animation: bar7 2s 1.4s infinite linear;
}

.dajianshi9 span:nth-child(8) {
    animation: bar8 2s 1.6s infinite linear;
}

.dajianshi9 span:nth-child(9) {
    animation: bar9 2s 1.8s infinite linear;
}

@keyframes bar1 {
    0% {
        background: #f677b0;
        margin-top: 25%;
        height: 10%;
    }

    50% {
        background: #f677b0;
        height: 100%;
        margin-top: 0%;
    }

    100% {
        background: #f677b0;
        height: 10%;
        margin-top: 25%;
    }
}

@keyframes bar2 {
    0% {
        background: #df7ff2;
        margin-top: 25%;
        height: 10%;
    }

    50% {
        background: #df7ff2;
        height: 100%;
        margin-top: 0%;
    }

    100% {
        background: #df7ff2;
        height: 10%;
        margin-top: 25%;
    }
}

@keyframes bar3 {
    0% {
        background: #8c7ff2;
        margin-top: 25%;
        height: 10%;
    }

    50% {
        background: #8c7ff2;
        height: 100%;
        margin-top: 0%;
    }

    100% {
        background: #8c7ff2;
        height: 10%;
        margin-top: 25%;
    }
}

@keyframes bar4 {
    0% {
        background: #7fd0f2;
        margin-top: 25%;
        height: 10%;
    }

    50% {
        background: #7fd0f2;
        height: 100%;
        margin-top: 0%;
    }

    100% {
        background: #7fd0f2;
        height: 10%;
        margin-top: 25%;
    }
}

@keyframes bar5 {
    0% {
        background: #7ff2d3;
        margin-top: 25%;
        height: 10%;
    }

    50% {
        background: #7ff2d3;
        height: 100%;
        margin-top: 0%;
    }

    100% {
        background: #7ff2d3;
        height: 10%;
        margin-top: 25%;
    }
}



.dajianshi10 {
    margin-top:100px;
    font-size: 80px;
    background: -webkit-linear-gradient(75deg,
            #2eaf8d,
            #2f6ae6 25%,
            #347ba6 50%,
            #16d225 55%,
            #4cc410 60%,
            #bb2c10 80%,
            #2f63a4 95%,
            #28dfd4);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-background-size: 200% 100%;
    -webkit-animation: flowCss 5s infinite linear;
}

@-webkit-keyframes dajianshiFlow {
    0% {
        /* 移动背景位置 */
        background-position: 0 0;
    }
    100% {
        background-position: -400% 0;
    }
}
.dajianshi10:hover {
    -webkit-animation: dajianshiFlow 3s infinite linear;
}


</style>
